<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Contact</title>
</head>
<style>
</style>

<body>
    <div id="app">
        <div class="top">
            <span>任务分配系统——联系人</span>
            <a href="http://localhost:8080/ManageSystem/user_home/main.html">首页</a>
            <a href="http://localhost:8080/ManageSystem/user_home/center.html">个人中心</a>
            <img :src="imageUrl" onerror="this.src='../profilephoto/default.jpg'" alt="头像" style="height:30px;width:30px;border-radius: 50%">
            <span>{{user.name}}</span>
            <el-button @click="exit">退出登录</el-button>
        </div>
        <div class="sidebar">
            <ul>
                <li><a href="http://localhost:8080/ManageSystem/user_home/main.html">当前任务</a></li>
                <li><a href="http://localhost:8080/ManageSystem/user_home/taskArchive.html">归档任务</a></li>
                <li><a href="javascript:;">联系人</a></li>
                <li><a href="http://localhost:8080/ManageSystem/user_home/notice.html">公告</a></li>
            </ul>
        </div>
        <div class="contact">
            <div class="department">
                <h2>部门负责人</h2>
                <p>
                    <img :src="department.profilephotoSrc" onerror="this.src='../profilephoto/default.jpg'" alt="头像" style="height:30px;width:30px;border-radius: 50%">
                    <span>{{department.name}}</span>
                    <span>{{department.email}}</span>
                </p>
            </div>
            <div class="employee">
                <h2>同事</h2>
                <el-table
                        :data="userData"
                        border
                        style="width: 100%">
                    <el-table-column
                            label="头像"
                            width="100">
                        <template slot-scope="scope">
                            <img :src="scope.row.profilephotoSrc" onerror="this.src='../profilephoto/default.jpg'" alt="头像" style="height:30px;width:30px;border-radius: 50%">

                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="姓名"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="email"
                            label="电子邮箱">
                    </el-table-column>
                </el-table>
            </div>
        </div>


    </div>
</body>
<script src="../js/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script>

    new Vue({
        el: "#app",
        mounted() {
            this.checkSession();
        },
        methods: {
            checkSession() {
                axios({
                    method: "get",
                    url: "http://localhost:8080/ManageSystem/user/checkSession"
                }).then(resp => {
                    if (resp.data === null) {
                        alert("请进行登录再操作")
                        window.location.href = "http://localhost:8080/ManageSystem/login.html";
                    }
                    else{
                        this.user = resp.data;
                        this.imageUrl = "../profilephoto/"+this.user.userId+".jpg";
                        this.selectUsers();
                    }
                })
            },
            selectUsers(){
                axios({
                    method: "get",
                    url: "http://localhost:8080/ManageSystem/user/selectUserByDeparmentId"
                }).then(resp => {
                    for(let i = 0;i<resp.data.length;i++){
                        resp.data[i].profilephotoSrc = "../profilephoto/"+resp.data[i].userId+".jpg";
                    }
                    this.department = resp.data.shift();
                    this.userData = resp.data;
                })
            },
            exit(){
                axios({
                    method: "get",
                    url: "http://localhost:8080/ManageSystem/user/delectSession",
                }).then(resp=>{
                    this.checkSession()
                })
            },
        },
        data() {
            return{
                user:{
                    userId:'',
                    departmentId:'',
                    name:'',
                    password:'',
                    position:'',
                    email:'',
                },
                department:{
                    userId:'',
                    departmentId:'',
                    name:'',
                    password:'',
                    position:'',
                    email:'',
                    profilephotoSrc:'',
                },
                userData:[{
                    userId:'',
                    departmentId:'',
                    name:'',
                    password:'',
                    position:'',
                    email:'',
                    profilephotoSrc:'',
                }],
                imageUrl: '',
            }
        }

    })
</script>
</html>